    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@page contentType="text/html; UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>班级管理</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"/>
        <script src="${pageContext.request.contextPath}/back/statics/js/jquery-1.8.3.min.js"></script>

    </head>
    <body>
<div class="container-fluid">

    <div class="row">
        <div class="col-sm-4 col-sm-offset-4">
            <h1 class="text-center">班级管理</h1>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <table class="table table-striped table-hover table-bordered">
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>所属标签</th>
                    <th>操作</th>
                </tr>
                <c:forEach items="${clazzes}" var="clazz" varStatus="state">
                    <tr>
                        <th>${state.count}</th>
                        <th>${clazz.name}</th>
                        <th>${clazz.tag.name}</th>
                        <th>
                            <a href="" class="btn btn-info btn-sm">修改</a>
                            <a href="" class="btn btn-danger btn-sm">删除</a>
                        </th>
                    </tr>
                </c:forEach>
            </table>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <form id="inputForm" class="form-inline" action="${pageContext.request.contextPath}/clazz/save" method="post">
                <div class="form-group">
                    <label for="name">名称:</label>
                    <input type="text" class="form-control" id="name" name="name">
                </div>
                <div class="form-group">
                    <label for="tagid">选择对应标签:</label>
                    <select name="tagid" id="tagid" class="form-control">

                    </select>
                </div>
                <button type="submit" class="btn btn-success">添加班级</button>
            </form>
        </div>
    </div>

</div>

</body>
</html>
<script>
    //定义文档就绪函数
    $(function () {
        //在页面一加载的时候发送一个ajax请求，获取班级类型的所有标签，并把获取的所有的班级标签显示在下拉列表中
        $.ajax("${pageContext.request.contextPath}/tag/findByType",{"type":"班级"},function (rs) {
            //rs就是请求返回的班级类型的标签集合
            //1.循环rs对象。取出集合中的每一个标签对象
            $.each(rs,function (index,tag) {
                //rs---循环的集合
                //index---下标
                //tag---循环的对象 4  nb班  <option value="nb班">nb班</option>
                //option的value一定要是标签对应的主键。这样在添加班级信息的时候才能
                //通过jquery创建option标签，把标签对象的名字做option的文本。标签的id作为value
                var option=$("<option/>").text(tag.name).val(tag.id);
                $("#tagid").append(option);
            });
        });
        //1,获取标签的节点对象,绑定submit时间
        $("#inputForm").submit(function () {
            //判断用户输入的城市名称是否为null
            //val()使用来获取当前输入框节点对象的值的，如果该输入框有值。返回ture 没值返回false
            if(!$("#name").val()){
                alert("班级名称不能为空！");
                return false;
            }
        });
    })

</script>